<template>
<div>
    <el-row id="aaa" type="flex" justify="start" align="center" style="border-bottom:1px solid #d3d3d3;">
      <span id="projectname">项目名称： {{ projectinfo.projectname }}</span>

      <span id="projectstatus">
        <el-tag v-if="projectinfo.abnormalstate === 30" color="#D80A1E"  size="medium"  effect="dark">
          {{ projectinfo.dispabnormalstate }}
        </el-tag>
        <el-tag v-else-if="projectinfo.abnormalstate === 20" color="#FF8C2E"  size="medium" effect="dark">
          {{ projectinfo.dispabnormalstate }}
        </el-tag>
        <el-tag v-else-if="projectinfo.abnormalstate === 15" color="#0000FF"  size="medium" effect="dark">
          {{ projectinfo.dispabnormalstate }}
        </el-tag>
        <el-tag v-else-if="projectinfo.abnormalstate === 10" color="#B8860B"  size="medium" effect="dark">
          {{ projectinfo.dispabnormalstate }}
        </el-tag>
        <el-tag v-else-if="projectinfo.abnormalstate === 0" type="success" size="medium" effect="dark">
          {{ projectinfo.dispabnormalstate }}
        </el-tag>
      </span>

      <span id="projectinfo">项目经理：{{ projectinfo.projectmanager }}</span>

      <span id="projectlevel">项目级别：{{ projectinfo.dispprojectlevel }} </span>

      <!-- <el-col :span="13" :offset="6">
        <el-row type="flex" justify="end">
          <el-button type="primary" size="small">快速新建</el-button>
          <el-button type="primary" size="small">存为模板</el-button>
          <el-button type="primary" size="small">暂停</el-button>
          <el-button type="primary" size="small">完成</el-button>
          <el-button type="primary" size="small">变更</el-button>
          <el-button size="small">删除</el-button>
          <el-button size="small">返回</el-button>
        </el-row>
      </el-col> -->
    </el-row>
  </div>
</template>

<script>
import { getAction, putAction, postAction, deleteAction } from "@tapui/utils/http"

// 项目负责人信息组件
export default {
  name: "headOfThisProject",
  // mixins: [mixin_list],
  props: { projectinfo: {} },
  data() {
    return {
      projectid: ""
    }
  },

  methods: {
    // getProjectInfo() {
    //   debugger
    //   getAction('pm/project/load', { id: this.projectid }).then(result => {
    //     debugger
    //     this.projectinfo = result.result
    //   })
    // }
  },
  created() {
    // this.getProjectInfo()
    // console.log(this.projectid)
  },
  watch: {
    projectinfo(val) {
      this.projectid = val.id
    }
  },
  mounted() {}
}
</script>

<style scoped lang="scss">
//应用flex布局
#aaa {

  padding-top: 5px;
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  align-content: center;
  align-items: center;
  height: 50px;

  //col垂直居中
  .el-col {
    text-align: start;
    margin: 0 10px;
     /deep/ .iconimg {
    width: 20px;
    height: 20px;
    margin: 0 auto;
  }
  }
}
#projectname {
  margin-left: 10px;
}
#projectstatus {
  margin-left: 50px;
}
//flex嵌套
#projectinfo {
  margin-left: 50px;
}
#projectlevel {
  margin-left: 50px;
}
/deep/ .el-tag--dark {
    border-color: #fff;
    color: #fff;
}
// .el-tabs__nav-scroll {
//   padding-bottom: 5px;
// }
// .app-container >>> .el-tabs__item {
//   height: 30px;
// }
// .el-tabs__nav-scroll {
//   padding-bottom: 5px;
// }
</style>
